<%--
  Created by IntelliJ IDEA.
  User: kurong
  Date: 2021/10/12
  Time: 19:18
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<html>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>商品名称</title>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/layui/css/layui.css" media="all">

    <link rel="stylesheet" href="${pageContext.request.contextPath}/css/generalMerchandise.css">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/css/product.css">

    <script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery-3.5.1.js"></script>

    <script type="text/javascript" src="${pageContext.request.contextPath}/layui/layui.js" charset="utf-8"></script>

    <script>
    $(document).ready(function () {
      $(".product-seckill-wrap").hide();
      // $(".product-seckill-wrap").click(function(){
      //     $(this).hide();
      // });
    });
  </script>

    <style>

        body {
            font: 12px/150% tahoma, arial, Microsoft YaHei, Hiragino Sans GB, "\u5b8b\u4f53", sans-serif;
            -webkit-font-smoothing: antialiased;
            color: #666;
            background: #fff;
        }

        .layui-nav .layui-nav-item {
            line-height: 40px;
        }

        .layui-bg-cyan {
            background-color: #010101 !important;
        }

        .layui-nav .layui-nav-item a {
            padding: 0 40px;
        }

        .layui-carousel[lay-arrow=always] .layui-carousel-arrow {
            opacity: 1;
            left: 0px;
            margin-top: -18px;
        }

        .layui-carousel:hover .layui-carousel-arrow[lay-type=add], .layui-carousel[lay-arrow=always] .layui-carousel-arrow[lay-type=add] {
            right: 0px;
        }

        .option-color {
            line-height: 40px;
        }

        .layui-tab-card > .layui-tab-title .layui-this {
            background-color: #e4393c;
            color: #fff;
            cursor: default;
        }


        .layui-tab-card > .layui-tab-title {
            /*width: 100%;*/
            background-color: #FAFAFA;
            border-bottom: 1px solid #e4393c;
        }

        .layui-tab-card > .layui-tab-title li {
            margin-right: 0;
            margin-left: 0;
            width: 120px;
        }

        .layui-tab-card {
            border-width: 0;
            min-height: 220px;
            display: table;
        }

        .layui-tab-title .layui-this:after {
            border: none;
        }

        .layui-tab-card {
            box-shadow: none;
        }

        .layui-tab-content {
            display: table;
            padding: 10px 0;
        }

        .layui-tab-title {
            width: 988px;

        }

        .layui-carousel-arrow {
            border-radius: 0;
            background-color: white;
            color: black;
        }

        .layui-carousel > [carousel-item] > * {
            background-color: white;
        }

        .into-cart a:hover {
            color: #FF0036;
        }

        .buy-now a:hover {
            color: #fff;
        }

        span, div, a {
            caret-color: transparent;
        }

        .buy-num {
            caret-color: black;

        }

        .layui-layer-btn {
            background-color: #f8f8f8;
        }

        .layui-layer-btn .layui-layer-btn0 {
            border-color: #ff0036;
            background-color: #ff0036;
        }

        .p-news {
            /*margin: 0 auto;*/
            text-align: center
        }

        .p-news img {
            max-width: 988px;
        }

        .product-img img {
            width: 450px;
            height: 450px;
        }


        .seckilling {
            background: url(//static.360buyimg.com/item/unite/1.0.137/components/default-soa/prom/i/seckilling.jpg) no-repeat #fe0851;
        }

        .activity-banner {
            height: 32px;
            line-height: 32px;
            padding: 0 10px;
            overflow: hidden;
            zoom: 1;
        }

        .activity-type {
            float: left;
        }

        .seckilling .sprite-seckilling {
            background-image: url(//static.360buyimg.com/item/unite/1.0.137/components/default-soa/prom/i/__sprite.png);
            background-position: -20px 0;
        }

        .activity-banner i {
            display: inline-block;
        }

        .seckill .sprite-seckill, .seckilling .sprite-seckilling {
            width: 20px;
            height: 20px;
            vertical-align: -4px;
            margin-right: 5px;
        }

        .seckilling .activity-type strong {
            color: #fff;
        }

        .seckill-yg .activity-type strong {
            color: #e4393c;
        }

        .activity-type strong {
            font-size: 16px;
            /*color: #ffe134;*/
            font-weight: 400;
        }

        .seckilling .activity-message {
            color: #fbe2e2;
            font-size: 12px;
            float: right;
        }

        .seckilling .activity-message span {
            font-size: 14px;
            color: #fff;
            width: 22px;
            background: #443b3b;
            line-height: 24px;
            margin: 0 4px;
            border-radius: 2px;
            display: inline-block;
            text-align: center;
        }

        .seckill-yg {
            background: url(//static.360buyimg.com/item/unite/1.0.137/components/default-soa/prom/i/seckill.png) no-repeat #f0f0f0;
        }

        .activity-price {
            float: left;
            padding: 0 10px;
        }

        .activity-price span, .activity-price strong {
            font-size: 16px;
            color: #666;
            font-weight: 400;
        }

        .activity-price span, .activity-price strong {
            font-size: 16px;
            color: #666;
            font-weight: 400;
        }

        .activity-price span {
            padding-left: 10px;
        }

        .seckill-yg .activity-message {
            color: #999;
            font-size: 12px;
        }

        .seckill-yg .sprite-seckill-yg {
            width: 20px;
            height: 20px;
            background-image: url(//static.360buyimg.com/item/unite/1.0.137/components/default-soa/prom/i/__sprite.png);
            background-position: 0 0;
            vertical-align: -4px;
            margin-right: 5px;
        }

        .seckill-yg .activity-message {
            color: #999;
            font-size: 12px;
        }

        .activity-message span {
            font-size: 14px;
            color: #fff;
            display: inline-block;
            width: 22px;
            line-height: 24px;
            text-align: center;
            background: #999;
            margin: 0 4px;
            border-radius: 2px
        }

        .activity-message {
            float: right;
        }

        .haha #search-2014 .text {
            height: 36px;
        }


         .hasPraise {
           color: red;
         }
         .sprite-praise2 {
           display: inline-block;
           background-position: 0 -34px;
         }


    </style>

</head>
<body style="height: 100%">

<jsp:include page="../navigation/navigation.jsp" flush="true"/>

<div class="product-main">
    <!-- 左边图片 -->
    <div class="product-picture-all">
        <div class="product-img">
            <img src="${vo.product.productPic}">
        </div>
        <div class="product-img-list">
            <div class="layui-carousel" id="test3">
                <div carousel-item="">
                    <ul class="pictures">
                        <c:forEach var="images" items="${vo.productPicInfo}" varStatus="s">
                        <c:if test="${s.count%5 == 1 &&s.count>1}">
                    </ul>
                    <ul class="pictures">

                        </c:if>
                        <li>
                                <%--                            <a> <img src="${images}" onmouseover="changeImg(${s.count})"></a>--%>
                            <a> <img src="${images}" class="proImages"></a>
                        </li>

                        </c:forEach>
                    </ul>
                </div>
            </div>
        </div>
        <!--        <div class="product-button"></div>-->
    </div>

    <!--  右边  -->
    <div class="product-text">
        <div class="product-name">${vo.product.productName}</div>



        <div class="product-wrap">
            <ul>

                    <li class="">
                        <label class="price-name">特 惠 价</label>
                        <span class="p-price">
                        <span class="price-sign">￥</span>
                        <span class="price-num">${vo.product.productPrice}</span>
                    </span>
                    </li>



                <li class="review">
                    <div class="xxx" style="width: 50px;height: 30px;">
                        <p>累计评价</p>
                        <a style="font: 14px verdana;color: #005ea7;">1万+</a>
                    </div>
                </li>

            </ul>

        </div>

    </div>
    <div class="product-choose">

        <ul class="choose-top">

            <li>
                <label>服务说明</label>
                <span>预计付款后7天内发货</span>
                <!--                    <span>0.55kg</span>-->
            </li>
            <li>
                <label>&nbsp; </label>
                <span>已满99元包邮</span>
            </li>
            <li>
                <label>&nbsp; </label>
                <span>由宠宠欲动商城提供商品、发货开票及售后服务</span>
            </li>
            <li>
                <label>重&nbsp;&nbsp;量</label>
                <span>0.55kg</span>
            </li>
        </ul>
        <ul class="choose-bottom">
            <!--            style="line-height: 40px;"-->
            <li class="option-color" style="line-height: 40px">
                <label>规&nbsp;&nbsp;格</label>

                <c:forEach var="sp" items="${vo.specs}">
                    <c:if test="${!(sp eq vo.product.productSpecs)}">
                        <div class="option color">
<%--                            <img src="${pageContext.request.contextPath}/images/productDetailsImg/option1.jpg">--%>
                            <i>${sp}</i>
                        </div>
                    </c:if>

                    <c:if test="${sp eq vo.product.productSpecs}">
                        <div class="option color" style="border-color: #e3393c">
<%--                            <img src="${pageContext.request.contextPath}/images/productDetailsImg/option1.jpg">--%>
                            <i>${sp}</i>
                        </div>
                    </c:if>
                </c:forEach>

            </li>


        </ul>

    </div>


        <div class="finish-btn">
            <div class="choose-count">
                <input class="buy-num" value="1" data-max="5" id="shangpinshuliang" name="shangpinshuliang">
                <a class="num-reduce">-</a>
                <a class="num-add">+</a>
            </div>
            <div class="into-cart">
                <form class="addCartFrom" action="" method="post">
                    <input type="hidden" value="${vo.product.productId}" id="productId" name="productId">
                    <input type="hidden" value="1" class="buy-num" id="productNumber" name="productNumber">
                    <input class="cartBtn" type="button" value="加入购物车">
                </form>
            </div>
            <div class="buy-now">
                <input type="hidden" value="${vo.product.productId}" id="shangpinxinxiId"
                       name="shangpinxinxiId">


                    <a id="goToOrder" class="jiesuan-btn" href="${pageContext.request.contextPath}/cart/101">立即购买</a>


            </div>
        </div>
<%--    </c:if>--%>


</div>
<div class="other-module">
    <div class="recommend">
        <div class="recommend-title">
            <h3>本类热卖排行榜</h3>
        </div>
        <div class="recommend-product">
            <ul>
              <c:forEach items="${recommendProducts}" var="product">
                <li>
                  <div class="c-p-img">
                    <a>
                      <img src="${product.productPic}">
                    </a>
                  </div>
                  <div class="c-p-name">
                    <a>${product.productName}</a>
                  </div>
                  <div class="c-p-price">
                    <strong>${product.productPrice}元</strong>
                  </div>
                </li>
              </c:forEach>
<%--                <li>--%>
<%--                    <div class="c-p-img">--%>
<%--                        <a>--%>
<%--                            <img src="https://img2.epetbar.com/common/upload/commonfile/2021/010/31/212611_801785.jpg@!400w-c">--%>
<%--                        </a>--%>
<%--                    </div>--%>
<%--                    <div class="c-p-name">--%>
<%--                        <a>美国原装进口天衡宝Natural Balance 限定系列鸭薯无谷配方成犬粮 24磅</a>--%>
<%--                    </div>--%>
<%--                    <div class="c-p-price">--%>
<%--                        <strong>￥439.00</strong>--%>
<%--                    </div>--%>
<%--                </li>--%>
<%--                <li>--%>
<%--                    <div class="c-p-img">--%>
<%--                        <a>--%>
<%--                            <img src="	https://img2.epetbar.com/common/upload/commonfile/2021/12/17/201609_626391.jpg">--%>
<%--                        </a>--%>
<%--                    </div>--%>
<%--                    <div class="c-p-name">--%>
<%--                        <a>加拿大原装进口纽顿nutram number 无谷低升糖系列 T27鸡肉&火鸡肉配方小型&玩赏犬粮 1.82kg</a>--%>
<%--                    </div>--%>
<%--                    <div class="c-p-price">--%>
<%--                        <strong>￥135.00</strong>--%>
<%--                    </div>--%>
<%--                </li>--%>
<%--                <li>--%>
<%--                    <div class="c-p-img">--%>
<%--                        <a>--%>
<%--                            <img src="	https://img2.epetbar.com/common/upload/commonfile/2021/12/20/121229_850483.jpg--%>
<%--">--%>
<%--                        </a>--%>
<%--                    </div>--%>
<%--                    <div class="c-p-name">--%>
<%--                        <a>加拿大原装进口 百加世NOW FRESH 无谷小型犬全龄配方粮 12磅</a>--%>
<%--                    </div>--%>
<%--                    <div class="c-p-price">--%>
<%--                        <strong>￥419.00</strong>--%>
<%--                    </div>--%>
<%--                </li>--%>
<%--                <li>--%>
<%--                    <div class="c-p-img">--%>
<%--                        <a>--%>
<%--                            <img src="https://img2.epetbar.com/common/upload/commonfile/2022/03/15/142844_608241.jpg">--%>
<%--                        </a>--%>
<%--                    </div>--%>
<%--                    <div class="c-p-name">--%>
<%--                        <a>比瑞吉俱乐部 健康膳食配方 成犬粮 10kg</a>--%>
<%--                    </div>--%>
<%--                    <div class="c-p-price">--%>
<%--                        <strong>￥205.00</strong>--%>
<%--                    </div>--%>
<%--                </li>--%>
<%--                <li>--%>
<%--                    <div class="c-p-img">--%>
<%--                        <a>--%>
<%--                            <img src="	https://img2.epetbar.com/nowater/showcase/2022/03/17/1647381126258891.jpg@!500w-c">--%>
<%--                        </a>--%>
<%--                    </div>--%>
<%--                    <div class="c-p-name">--%>
<%--                        <a>皇家royal canin MIS30小型犬奶糕/怀孕母犬/哺乳母犬1kg</a>--%>
<%--                    </div>--%>
<%--                    <div class="c-p-price">--%>
<%--                        <strong>￥79.00</strong>--%>
<%--                    </div>--%>
<%--                </li>--%>
            </ul>

        </div>

    </div>
    <div class="details">

        <div class="layui-tab layui-tab-card">
            <ul class="layui-tab-title">
                <li class="layui-this">商品介绍</li>
                <li>商品评价</li>
                <!--                <li>权限分配</li>-->
                <!--                <li>商品管理</li>-->
                <!--                <li>订单管理</li>-->
            </ul>
            <div class="layui-tab-content" style="height: 100px;">
                <div class="layui-tab-item layui-show">
                    <div class="p-parameter">
                        <div class="p-brand">
                            <a> &nbsp;</a>
                            <a></a>
                        </div>

                        <ul class="p-parameter-list">

<%--                            <li title="后置三摄">摄像头数量：${serverResponse.data.product.proCamera}</li>--%>

                        </ul>

                    </div>
                    <div class="p-news" style="max-width: 988px">
                        ${productInfo}

                    </div>

                </div>
                <div class="layui-tab-item p-review">
                    <div class="review-title">
                        <h3>商品评价</h3>
                    </div>

                    <div class="reviews">

                        <div class="review-item">

                            <div class="user-info">
                                <img src="" width="25"
                                     height="25" class="avatar"> username
                            </div>
                            <div class="review-blob">

                                <div class="review-star star3"></div>
                                <div class="blob-wrap"></div>

                                <div class="comment-message">
                                    <div class="order-info"><span>亮黑色8G+256G</span><span>【官方标配】</span>
                                        <span></span>
                                        <span></span>
                                        <span>2021-08-02 17:07</span>
                                    </div>
                                    <div class="comment-op">
                                        <span class="J-report">举报</span>
                                        <span class="J-nice "><i class="sprite-praise"></i><i>0</i></span>
                                        <span href=""><i class="sprite-comment"></i>7</span></div>
                                </div>
                            </div>
                        </div>


                    </div>

                </div>
            </div>
        </div>

    </div>
</div>
<!--下方提示信息-->
<%--<jsp:include page="../navigation/footer.jsp"/>--%>
<script type="text/javascript" src="${pageContext.request.contextPath}/layui/layui.js" charset="utf-8"></script>

<script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery-3.5.1.js"></script>

<script>
  layui.use('element', function () {
    var element = layui.element; //导航的hover效果、二级菜单等功能，需要依赖element模块

    //监听导航点击
    element.on('nav(demo)', function (elem) {
      //console.log(elem)
      layer.msg(elem.text());
    });
  });


  layui.use('carousel', function () {
    var carousel = layui.carousel;
    carousel.render({
      elem: '#test3',
      width: '100%',
      height: '100%',
      arrow: 'always',
      anim: 'default',
      indicator: 'none',
      autoplay: false
    });
  });
</script>

<script type="text/javascript">
    $(".sp").click(function goBySpecs() {

        // this.hide();
        var proNme = "${vo.product.productName}";
        var proSpecs = $(this).find('i').text();


        console.log(proNme);
        console.log(proSpecs);

        window.location.href = 'coditions?proName=' + proNme + '&proSpecs=' + proSpecs;
    });

</script>

<%--  添加购物车  --%>
<script src="${pageContext.request.contextPath}/layui/layui.js" charset="utf-8"></script>
<script>
    //1. 提交表单
    $(".cartBtn").click(function () {
        //2. 获得表单中所有数据

            var formData = $(".addCartFrom").serialize();
            console.log("表单数据: " + $("#productNumber").val());
            var url = "${pageContext.request.contextPath}/shopCart/save";
            var dataType = "json";
            //3. 产生ajax请求
            //  $.post(url,formData,"成功回调", dataType);

            $.post(
                url,
                formData,
                function (result) {
                    if (result.code== 200){
                        console.log("添加购物车成功！")
                        var carturl = '${pageContext.request.contextPath}/shopCart';
                        alertMessage(result.reason, "到购物车", carturl);
                    }else {
                            var loginurl = "${pageContext.request.contextPath}/customer/login.jsp";
                            alertMessage("请先登录", "去登录", loginurl);
                    }
                },
                dataType
            );

        //4. 获得服务器返回数据: 添加成功/添加失败 消息提示

    });

    function alertMessage(message, mesBtn, gourl) {
      //示范一个公告层
      layer.open({
        type: 1,
        title: false, //不显示标题栏
        closeBtn: false,
        area: '300px;',
        shade: 0.25,
        id: 'LAY_layuipro', //设定一个id，防止重复弹出
        btn: [mesBtn, '继续浏览'],
        btnAlign: 'c',
        moveType: 1, //拖拽模式，0或者1
        // content: '<div style="padding: 50px; line-height: 22px; background-color: #393D49; color: #fff; font-weight: 300;">你知道吗？亲！<br>layer ≠ layui<br><br> layer 只是作为 layui 的一个弹层模块，由于其用户基数较大，所以常常会有人以为 layui 是 <del>layerui</del><br><br>layer 虽然已被 Layui 收编为内置的弹层模块，但仍然会作为一个独立组件全力维护、升级 ^_^</div>'
        content: '<div style="padding: 50px; line-height: 22px; background-color: white; color: black; font-weight: 300;">' + message + '！</div>',
        success: function (layero) {
          var btn = layero.find('.layui-layer-btn');
          btn.find('.layui-layer-btn0').attr({
            href: gourl
            , target: '_blank'
          });
        }
      });
    };


</script>

<%-- 后面加的点击立即购买，跳转到下单页面 --%>
<script>

    // 把商品id及其对应的商品数量加入到 map 中，里面的数据只有一个
    var productIdAndCount = new Map();

    // var idAndCount =new Map();
    $("#goToOrder").click(function () {
        /* 商品id */
        var productId = parseInt(document.getElementById("shangpinxinxiId").value);
        /* 商品数量 */
        var count = parseInt(document.getElementById("shangpinshuliang").value);
        productIdAndCount.set(productId, count);
        // 将map转为object
        let obj = Object.create(null);
        for (let [k, v] of productIdAndCount) {
            obj[k] = v;
        }
        $.ajax({
            url: "${pageContext.request.contextPath}/order/place_an_order",
            data: obj,
            method: 'post',
            async: false,
            success: function (data) {
                if (data==""){
                    var loginurl = "${pageContext.request.contextPath}/customer/login.jsp";
                    alertMessage("请先登录", "去登陆", loginurl);
                }else {
                    window.location.href = "${pageContext.request.contextPath}" + data;
                }
                // console.log("成功返回的数据: " + data);

            },
            error: function (data) {
                <%--window.location.href = "${pageContext.request.contextPath}"+data.responseText;--%>
            },
        })
    })

</script>

<script src="${pageContext.request.contextPath}/js/product.js"></script>

<script>
  $(".p-review").click(function (event) {
    var ele = event.target;
    if (ele.className.indexOf("sprite-praise") != -1) {
      //console.log("ele:" + ele.innerHTML);
      var praiseCount = ele.nextElementSibling.innerText;
      console.log("点赞数：" + praiseCount);

      //暂时将评论id写死
      var reviewId = 30001;
      getPraise(ele,reviewId,praiseCount);
    }
  })

  function getPraise(spanEle,reviewId,praiseCount) {
    console.log("评论id：" + reviewId);

    var hasPraise = false;
    var styleList = spanEle.parentElement.classList;
    for (var i = 0; i < styleList.length ; i++) {
      console.log(styleList[i]);
      if (styleList[i] == "hasPraise") {
        hasPraise = true;
      }
    }
    if (hasPraise) {
      praiseCount--;
      spanEle.nextElementSibling.innerText = praiseCount;
      spanEle.parentElement.classList.remove("hasPraise");//移除已点赞样式
      spanEle.classList.remove("sprite-praise2");
      spanEle.classList.add("sprite-praise");
      console.log("当前评论的点赞总数：" + praiseCount);
      // var data = "commentId=" + reviewId + "&goodStatus=0"+"&praiseCount=" + praiseCount;
      var url = '${pageContext.request.contextPath}' + "/praise/cancle";
      //取消点赞
      $.post(
        url,
        {
          'commentId':reviewId,
          'goodStatus':0,
          'praiseCount':praiseCount
        },
        function (result) {
          console.log("取消点赞后的结果是：" + result);
        },
        "json"
      )
    } else {
      praiseCount++;
      spanEle.nextElementSibling.innerText = praiseCount;
      spanEle.parentElement.classList.add("hasPraise");//增加点赞后的样式   红色。
      spanEle.classList.remove("sprite-praise");
      spanEle.classList.add("sprite-praise2");
      console.log("当前评论的点赞总数：" + praiseCount);
      // var data = "commentId=" + reviewId + "&goodStatus=1&praiseCount"+praiseCount;
      var url = '${pageContext.request.contextPath}' + "/praise/save";
      //添加点赞
      $.post(
        url,
        {
          'commentId':reviewId,
          'goodStatus':1,
          'praiseCount':praiseCount
        },
        function (result) {
          console.log("点赞后的结果" + result);
        },
        "json"
      )
    }
  }
</script>

</body>
</html>
